<template>
	<view class="regPage">
		<view class="pen-box">
			<view class="arrow-left-item" @click="handleRetuen">
				<uv-icon name="arrow-left" size="22px" color="#fff"></uv-icon>
			</view>
			<view class="pen-text">邀请好友</view>
			<view class=""></view>
		</view>
		<view class="form-box">
			<view class="user-info">
				<view class="by-box">
					<view class="by-name">邀请码</view>
					<view class="by-info codeNum" @click="hanldeCopy">
						<div>
							{{ infoList.invitationCode}}
						</div>
						<div class="codeNum-icon">
							<image src="/static/icon/icon-18.png" mode=""></image>
						</div>

					</view>
				</view>

				<view class="by-box">
					<view class="by-name">公司名称</view>
					<view class="by-info">{{ infoList.firmName}}</view>
				</view>
				<view class="by-box">
					<view class="by-name">所属部门</view>
					<view class="by-info">{{ infoList.intervieweeDepartName}}</view>
				</view>
				<view class="by-box">
					<view class="by-name">被访人姓名</view>
					<view class="by-info">{{ infoList.intervieweeName}}</view>
				</view>
			</view>
		</view>

		<view class="bottom-padding"></view>
		<view class="sub-item" >
			<view class="sub-btn">邀请好友</view>
			<button class="btn-hide" open-type="share">
			</button>			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				invitationCode:null,
				infoList: {
					intervieweeJobNumber: '',
					intervieweeName: '',
					intervieweeDepartName: '',
					intervieweeDepart: '',
					firmName: '',
					invitationCode: ''
				}
			};
		},
		onLoad(option) {
			const {
				paramsStr
			} = option;
			if (paramsStr) {
				try {
					const userInfo = JSON.parse(decodeURIComponent(paramsStr));
					console.log('userInfo', userInfo)
					this.invitationCode = userInfo.invitationCode;
					const {
						username,
						userName,
						nickName = '',
						deptName = '',
						deptId = '',
						firmName = '',
						invitationCode = ''
					} = userInfo || {};

					// 批量赋值给infoList
					this.infoList = {
						...this.infoList,
						intervieweeJobNumber: username || userName || '',
						intervieweeName: nickName,
						intervieweeDepartName: deptName,
						intervieweeDepart: deptId,
						firmName: firmName,
						invitationCode: invitationCode
					};

				} catch (err) {
					console.error('解析用户信息失败', err);
					uni.showToast({
						title: '数据异常',
						icon: 'none'
					});
				}
			}
		},
		onShareAppMessage(res) {
			// 判断分享触发来源
			if (res.from === 'button') {
				console.log('来自页面按钮分享');
			} else {
				console.log('来自右上角菜单分享');
			}	
			const paramsStr = JSON.stringify(this.infoList)
			return {
				title: '邀请好友',
				// 携带参数示例：跳转到 detail 页面并传 pageId
				path: `/pages/register/verifyCode/verifyCode?invitationCode=${this.invitationCode}`,
				success: function(res) {
					console.log('分享成功', res);
					uni.showToast({
						title: '分享成功',
						icon: 'success'
					});
				},
				fail: function(err) {
					console.log('分享失败', err);
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					});
				}
			};

			// const paramsStr = JSON.stringify(this.infoList)
			// return {
			// 	title: '邀请好友',
			// 	// 携带参数示例：跳转到 detail 页面并传 pageId
			// 	path: `/pages/register/register?paramsStr=${encodeURIComponent(paramsStr)}`,
			// 	success: function(res) {
			// 		console.log('分享成功', res);
			// 		uni.showToast({
			// 			title: '分享成功',
			// 			icon: 'success'
			// 		});
			// 	},
			// 	fail: function(err) {
			// 		console.log('分享失败', err);
			// 		uni.showToast({
			// 			title: '分享失败',
			// 			icon: 'none'
			// 		});
			// 	}
			// };


		},
		methods: {			
			handleRetuen() {
				uni.navigateBack({
					delta: 1
				})
			},
			hanldeCopy() {
				uni.setClipboardData({
					data: this.infoList.invitationCode,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					},
					fail: function(err) {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			}


		}

	};
</script>

<style lang="scss">
	.regPage {
		width: 100vw;
		min-height: 100vh;
		padding-bottom: 80px;
		box-sizing: border-box;
		background-image: linear-gradient(to bottom, #2B74E2 50%, #eff4fb);
		background-size: 100% 400px;
		/* 渐变只占顶部 400px 高 */
		background-repeat: no-repeat;
		background-color: #eff4fb;
		/* 超出 400px 后的背景色 */
	}

	.pen-box {
		width: 100%;
		height: 100px;
		padding: 0 10px;
		padding-top: 30px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.pen-text {
			font-size: var(--font-16);
			color: var(--color-ff);
			font-weight: 600;

		}


	}

	.form-box {
		padding: 20px;
		box-sizing: border-box;

		.user-info {
			width: 100%;
			height: auto;
			background-color: #fff;
			border-radius: 10px;
			margin: 20px 0px;
			padding: 20px;
			box-sizing: border-box;

			.by-box {
				display: flex;
				flex-direction: column;
				gap: 6px;
				margin: 14px 0;

				.by-name {
					color: var(--color-333);
					font-size: var(--font-16);
				}

				.by-info {
					color: var(--color-333);
					font-size: var(--font-18);
					font-weight: 800;
				}

				.codeNum {
					display: flex;

					.codeNum-icon {
						width: 20px;
						height: 20px;
						margin-left: 6px;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.by-info-item {
					color: var(--color-333);
					font-size: var(--font-18);
					font-weight: 800;
					display: flex;
					gap: 10px;
				}
			}

			.visitor-tips {
				width: 100%;
				padding: 10px 0px;
				box-sizing: border-box;
				border-bottom: 1px solid #e8e8e8;
				color: var(--color-333);
			}



		}

	}


	.sub-item {
		width: 100%;
		height: 100px;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.sub-btn {
			width: 80%;
			height: 40px;
			text-align: center;
			line-height: 40px;
			background-color: #2b74e2;
			border-radius: 50px;
			color: var(--color-ff);
			font-size: var(--font-16);
		}
	}
</style>